Este script lo encontré en Vagabundia hace tiempo y lo añadí a un blog de pruebas para ver el resultado, ahí quedó hasta que la pregunta de un amigo bloguero me hizo recordarlo.
Con este script podemos aumentar el tamaño de las fuentes del blog, o si lo preferimos de una parte en concreto.

Para utilizarlo podemos descargarlo desde la página del autor o del script que J.Miur amablemente nos proporciona. El lugar indicado para añadirlo en nuestra plantilla es justo antes de </head>


<script type="text/javascript">
var tgs=new Array('div','td');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return

var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz &lt; 0) sz=0;
if (sz &gt; 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i &lt; tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j &lt; cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>

Una vez guardamos los cambios nos dirigimos a plantilla de diseño para añadir un nuevo elemento de página y escogemos HTML/Javascript en su interior añadiremos lo siguiente:

<a href="javascript:ts('body',1)"> AUMENTAR </a>
<a href="javascript:ts('body',-1)"> DISMINUIR </a>

Si miramos nuestro blog comprobaremos que aparecen dos enlaces de texto, AUMENTAR y DISMINUIR y al clicar se produce el efecto en la totalidad del blog. Si deseamos el efecto en una parte determinada del blog sustituimos 'body' por 'main' si es para las entradas o 'sidebar' si es para la columna.
Esto último puede variar según la plantilla y deberíamos mirar el DIV que corresponde a la parte que vamos a aplicar el efecto.

Otra modificación sería sustituir el texto AUMENTAR y DISMINUIR por una imagen en este caso lo haremos suprimiendo el texto y en su lugar añadimos <img src="url-imagen"/>
El resultado sería algo así: (Imágenes extraídas sigilosamente de Vagabundia)

Ver efecto en funcionamiento
Carlos Pizcos

Que bueno que vuelves a publicar madrina-)))...tanto trabajar no es bueno....por cierto mucho mejor la carga del blog -)))

Salu

Responder
Blanca

Hola Gema,
estoy de nuevo aquí para pedirte ayuda (cuando buenamente puedas, eh?)
En primer lugar, he añadido la nueva lista de blogs (blogroll) de Google, pero no me gusta el efecto, el enlace a los nuevos posts sale en negro, horrible. ¿Se puede cambiar el color? ¿Cómo?
Otra cosa. Quiero cambiar algunas frases hechas, como "entradas anteriores", "0 comentarios"... sé que se puede hacer pero no veo dónde en el html.
Y por último, ¿puedo cambiar en la firma de los posts, donde pone "publicado por" por una imagen?
Perdona si son muchas cosas, las dos últimas no me importan tanto, lo primero si.
Muchas gracias como siempre, un abrazo.

Responder
Anónimo

No se ven las imagnes, no las tuyas ni las de ver funcionamiento.

Responder
Jan

Que guay!!
Lo acabo de aplicar y me gusta el resultado!
clicando "Control" y girando la ruedecilla del ratón se consigue el mismo resultado, PERO LO REALMENTE BUENO de este truco es que puedes elegir lo que deseas ampliar o disminuir. A demás de hacerse más patente para aquellos que no lo sepan.
GRACIAS MIL!

Responder
JuanDaemonia

Hola, yo tengo un problema y no sé muy bien si me podeís ayudar, tengo un blog que no sale en absolutamente ningún motor de busqueda, ni tan siquiera si copio la dirección completa y la pego en el google, para verlo tengo que dejar un comentario ( como aqui ) y entonces si le puedes clicar encima...tengo seleccionado perfil público, salir en los motores, todo lo que he encontrado..pero nada...por que es esto?? que puedo hacer para que mis amigos puedan poner el nombre y encontrame en google u otros buscadores???

Muchas gracias de antemano!!

Responder
CarlosCarrión

Hola, soy nuevo en esto de los blog y la verdad es que este me ha sido de mucha ayuda...Lo que tengo un problema, que espero que me puedas resolver. En la sección de "menu" hay uno que se hace con un generador de menú CSS menu generator, todo me salio bien, hasta que lo coloque encima de las entradas, que se queda mas corto y no se ve entero, en cambio si lo pongo abajo del todo si....no se a que se debe, he intentado cambiar las maedidas del menu en HTML y ninguna lo consigue....tiene solucion ??
P.D: Te enlace no se si te importa, es que este blog me ha sido útil, un saludo y gracias

Responder
Gem@

Hola Pizcos a mi también me alegra verte por aquí.
- Lo dela carga debe ser cosa de duendes porque no hice nada :)

Saludos Blanca, para personalizar un poco el blogroll estos pasos pueden servirte de ayuda.

El texto de los iconos de navegación (Entrada más recientes,Página principal
,Entradas antiguas puedes cambiarlo siguiendo los pasos de esta entrada y si lo prefieres ahí mismo explico cono añadir unos iconos.

El texto de x comentarios lo puedes cambiar desde la plantilla de diseño clicando en "Editar entrada" y sustituyendo la frase comentarios por dejaron su huella, estuvieron aquí o cualquier otra de tu cosecha. Seguro que tienes imaginación para eso :)
Si lo que deseas es una personalización más completa donde además de modificar ese texto te muestre uno diferente según los comentarios que tengas puedes encontrar una explicación muy completa en Vagabundia.

Nos queda el publicado por... esa parte la puedes modificar de dos formas una es respetando la frase y añadiendo una imagen al lado puedes ver como hacerlo aquí. Si lo que deseas es sustituir el texto y dejar sólo la imagen entonces ve a plantilla y en Edición de HTML marca para expandir la plantilla y busca lo siguiente:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Lo que aparece en negrita debes sustituirlo por la imagen, es decir <img src="url-de-la-imagen"/>
Sobra decirte que puedes mirar todos estos cambios en vista previa, espero no olvidarme nada :)

anónimo se ven perfectamente con Firefox y Explorer, nadie ha tenido ese problema debe ser tu navegador :(

Jan !!que maravilla¡¡ es un muestra de lo que hace la imaginación !me encanta¡ ¿puedo enlazar tu blog en esta entrada para que vean como te ha quedado?
- Lo de "Control" y girando la ruedecilla lo tengo en una entrada del blog pero no tiene comparación ;)


JuanDaemonia ¿te diste de alta en Google? es que si no das de alta tu blog los motores de búsqueda no lo encuentran :(
Mira esta entrada creo que es bueno saber todo lo que dice.

Carluso para que salga completo necesita más espacio, el lugar ideal sería debajo del logo, es decir en un elemento de página pero del header.
Si tu plantilla viene con un sólo elemento de página y está ocupado por el logo podemos añadir otro, una vez lo hagas verás que justo debajo del logo (a veces encima) aparece una pestaña de "Añadir un elemento de página" en ese elemento nuevo es donde clicas y en en HTML.... añades el código del menú. Luego puedes arrastrarlo hasta el lugar deseado (debajo del logo)
(Mira esta entrada que te hagas una idea de lo que trato de explicarte)
Para añadir un nuevo elemento ve a plantilla en Edicción de HTML y marca expandir la plantilla. Allí busca:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y lo sustituyes por:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Ya me dirás el resultado ;)

Responder
Gem@

Me olvidaba... gracias por enlazarme Carluso, no me molesta todo lo contrario... :) :) :)

Responder
CarlosCarrión

Muchisimas, muchisimas gracias. Añadi un nuevo elemento justo debajo de la cabecera, aunque despues me vi obligado a cambiar las medidas del menu, pero ha sido fácil...Por fin ya con menu espera que el blog empiece a funcionar. Un saludo y de nuevo muchas gracias, crei que ya no lo iba a conseguir.
P.D: Encantado de haberte linkeado, y que gracias a el cambio en el menu se vea la sección de Enlaces xDD
Un saludo

Responder
kaka

Hola Gema, encontré tu blog a través de Google hace unos días y desde entonces tus entradas me han sido re-útiles con el diseño de mi blog.

Además, son tan didácticas que me permiten ir más allá y atreverme a modificar un poquitín tus códigos, y lo más sorprendente ¡con éxito!

Por ello, me gustaría agradecerte el trabajo que te tomas en beneficio de la comunidad bloguera y animarte a seguir.

Y desde ya tienes un enlace en mi blog ;)

Un saludo!

Responder
Jan

Hola Gema!!
Pues claro que puedes poner un enlace hacia mi blog. Para mi es un honor.
Un beso!
:)

Responder
Anónimo

Muy buen post gem@!! Me gusta mucho lo de poder agrandar el texto, ya veré cuando me pongo a implementarlo.
Y lo de JAN buenísimo! quedó re lindo.

Yo te escribía por otro tema, quería saber, y perdón por mi ignorancia, como se hace para poner esta cajita donde estoy escribiendo este comentario, me estoy disculpando porque lo he visto por todos lados y supongo que es re fácil, y tal vez hasta sea una nueva implementación de Blogger y yo ni enterada.
Cuando tengas tiempo por favor si me sacas la duda te lo agradeceré, me gustaría poner esto en mis blogs.

Tal vez tendría que ponerlo desde Blogger en Borrador... si hago tiempo me fijo.

Un besote gem@, ya te estoy viendo mas seguido por aquí ehh...
No trabajes tanto chica!

PD: No te conté que tengo otro blog en WordPress, hace tiempo ya, pero lo tenía abandonado, porque esa plataforma si no pagás no te deja hacer mucho y es un tanto complicada, pero lo he estado actualizando y creo que voy a seguir trabajando un poco allí, si querés visitarlo y enlazarlo la url es http://nellymdq.wordpress.com, algo pude personalizarle y fue la cabecera, lo único.

Besotes!!

Responder
Esther
Este comentario ha sido eliminado por el autor.
Responder
Esther

Gem@ te quiero dar las gracias por tu blog, lo descubrí através de Cesar y la verdad es quelo explicas todo con una claridad...La verdad es que mereces todos esos premios que te dan continuamente.
Hace unos días te dejé un comentario/pregunta, que seguro que no viste o habrás estado muy liada, es tanta gente la que te consulta...
te lo vuelvo a poner por si encuentras un hueco y me puedes ayudar, gracias de antemano.

"Hola Gema, me gustaría hacerte una consulta.
Me gustaría saber si hay forma de expandir la página de tal forma que los elementos que instalo ocupen la misma cantidad de espacio que el título.
Bueno no se si me explico bien, si entras en mi blog verás como el título se expande bastante más que el menú, aunque yo cuando añada un elementos lo coloque en el mismo sitio, gracias"

Responder
Kimekiu

Había visto el post, pero temía no hacerlo bien.
Muxas Gracias por el datito ^w^
PD: Disculpa que no comente nunca pero me da algo de nercio....noc pok x.x

Responder
Gem@

Me alegra que saliera bien Carluso ;)

Pues muchas gracias por el comentario KaKa, la verdad que animas mucho a seguir esta tarea :D
Gracias por el enlace.

Gracias Jan, otro beso ;)

!Hola K_nelita ¡ me alegra mucho verte por aquí :D
La cajita es el nuevo formulario de comentarios de Blogger, aún no tuve tiempo de postear sobre ello, y te explico por qué....
Añadirlo al blog es muy sencillo, el problemilla viene si tenemos la plantilla muy modificada (pero tiene arreglo eh) por eso estoy tardando tanto en postear sobre ese tema porque cuando hablo sobre algo me gusta tener soluciones a mano para posibles problemas.
Si te urge mucho yo me he guiado de Vagabundia en esta entrada.
(Tomo nota del nuevo blog ;) ) !Besotes¡

Hola Esther te agradezco el comentario y te comento que contesté sin darte solución alguna porque no termino de comprender lo que deseas hacer :(


Hola Kiu no debes disculparte por no comentar. He visto tu blog de pruebas y el efecto funciona perfectamente :D

Responder
Meigo, aprendiz de Druida

Muchos besos Gema. Te mereces esos premios y algunos más. Todo volverá a ser normal y la bendita y tediosa cotidianeidad, nos volvera en esconder entre sus brazos.
Muchos besos, y muchas rosas.

Responder
nashmerville

Hola Gemma!

No hay manera de que me salga lo de aumnetar las fuentes, lo que no entiendo es que lo hago en un blog de pruevas (http://osonapruevas.blogspot.com) y en mio, no lo consigo (http://programariweb.blogspot.com), puede ser que hubiese algun script interno que "choque" con este y no le permita realizar su función?.

Muchas gracias Gemma

Responder
nashmerville

Perdon Gemma el Blog de pruevas que si sale es este.. ---> http://provesosona.blogspot.com/

Un abrazo

Responder
Rubén Bodewig

Hola Gema! en Alicante Vivo ya sabes que te debemos muchas de nuestras herramientas más interesantes.
Nos lee mucha gente mayor y esta función es especialmente interesante para nosotros. Sin embargo, no logro que funcione, y he seguido tus pasos al pie de la letra.
En un blog de pruebas sí me funciona, por lo que debe haber algo que sea incompatible con este código. ¿Tienes alguna pista?
lo he puesto al final del sidebar de momento, mientras no funciona, por si puedes entrar a echar un vistazo: www.alicantevivo.org

por cierto, en esta entrada hay un pequeño error (creo), cuando explicas el html para poner lo de AUMENTAR y DISMINUIR, en lugar de un ">" aparece "&gt"

una cuestión más: puedes explicar lo de agregar o quitar las etiquetas que se verán afectadas? qué hay que poner ahí y para qué sirve? qué quieren decir "tr, "div", "td"...

MILLONES DE GRACIAS!

Responder
Rubén Bodewig

ah, y una buena idea podría ser ponerlo al final de cada post, del mismo modo que los iconos de "digg", "delicious"... de tal manera que sólo ese post cambiara el tamaño de fuente. podría hacerse?

Responder
Gem@

Jose Luis leyendo detenidamente la fuente de esta entrada en Vagabundia he llegado a la conclusión que el problema es que las fuentes deben estar definidas en pixeles (px) y no como unidades relativas (em) En un principio pensaba que este problema sólo podía afectar al primer script que ofrece J.Miur pero no al segundo ( nos da dos posibilidades ) el que yo explico es el de DynamicDrive.

Por lo que he visto en tu plantilla usas las dos em y px ¿solución? J.Miur en su artículo dice que puede modificarse, yo te recomiendo antes de hacer ninguna variación leer detenidamente su artículo y hacer la prueba en http://provesosona.blogspot.com/ pero con la misma plantilla, es decir descargar la plantilla original y acoplarla al blog de pruebas.

Rubén para ti va la misma explicación que para Jose Luís en tu plantilla se mezclan unidades relativas con pixeles mi recomendación es antes de hacer nada leer detenidamente la entrada de J.Miur él detalla mejor que nadie como solucionar el problema. De todas formas le he dejado un comentario al respecto para que me diga cual es la mejor solución ;)

-Estás en lo cierto, tuve el error al convertir el código. También he suprimido lo de las etiquetas afectadas ya que se refiere a otro script.
De todas formas te explico que la etiqueta tr la usamos para definir el comienzo de una fila. La etiqueta td indica las celdas que hay dentro de una fila.
El uso de la etiqueta div sirve para separar espacios, es como un contenedor donde podemos añadir atributos "ID" para identificar un nombre "STYLE" para crear estilos.

Respecto a añadir el enlace en el footer de las entradas si es posible, bastaría con añadir el enlace antes <p class='post-footer-line post-footer-line-3'/> y en el enlace cambiar el ID por el nombre (la parte que deseamos aumentar)

Responder
Rubén Bodewig

Gracias Gema, he cambiado todos los lugares donde pone font-size. Por si a alguien le sirve, aquí pongo una tabla de conversión (aunque es aproximada, y luego hay que ajustar "a ojo"):

http://www.reeddesign.co.uk/test/points-pixels.html

Sin embargo, sigue sin funcionarme. Sólo hay que cambiar donde pone font-size o hay algún otro parámetro a convertir a píxels?

Responder
Rubén Bodewig

Por si sirve, también he mirado lo que te ha contestado JMiur, y he puesto esto:
var szs=new Array('70%','80%','90%','100%','110%','120%','130%');

pero nada...

Responder
Gem@

Mi entrañable amigo Meigo te pido disculpas de no contestar a tu comentario antes, pero accedí desde el correo y me he dado cuenta ahora de mi error :(
Me alegra ver que estás bien ;)
Abrazos cálidos.

Responder
Gem@

Lo siento mucho Rubén sé que tienes interés en añadir este script pero no tengo otra solución.
Como último intento ¿por qué no instalas la misma plantilla en un blog de pruebas y sustituyes TODAS las propiedades relativas por pixeles?

Responder
Admin

Hola gem@, ya sabes como soy, cuando se me ocurre algo no puedo esperar mucho, ya fui por lo de Jmiur y logré poner la dichosa cajita, pero... siempre hay un pero viste?
Hay algunas cosas que solo vos sabes explicar o solo a vos te entiendo ja ja
Voy a esperar que hagas el post, pero te adelanto que lo que quiero es poner una imagen como tenés vos en el texto, cambiar el color de fuente para que se note mas y se distinga del fondo, y poder poner que la gente elija que editor quiere usar como tenés vos, una parte de ese código pude ponerla pero la segunda no.
Y lo de la imagen Jmiur no lo explica y me gustaría que vos me aconsejaras cual me quedaría mejor.
También de donde se cambia el texto predeterminado por uno como el tuyo que dice "¿Algún comentario que hacer?", aunque no sea ese precisamente el texto que quiero poner, solo saber como o de donde se cambia.
Pero no te preocupes, yo te espero, ahora ya lo tengo en el blog, solo me faltan esos detalles que puedo esperar.
Besotes gemit@ querida, ayer fue el día del amigo en Argentina y varios paises mas, no se si en España lo festejan pero igual te digo Feliz Día amiga mía!

Responder
Carlos

Hola me gustaria saber como se le puede hacer para mostrarlo debajo del titulo del post

Muy buen blog felicidades

Responder
Anónimo

Hola:
Me encanta el blog, ya copie para el mio unos cuantos efectos y quedaron muy bien, no pude con el de "Leer mas..." supongo que será porque es una plantila adaptada.
La cuestión es que puse este de las fuentes y el de "black & White" (que necesitó unos retoquecitos pero funcionó)en un mismo gadget y además el "ir arriba".
Lo que quisiera saber es si puedo poner los tres en un solo gadget (una especie de panel de control) pero que quede flotante como la flecha y no fijo en la sidebar

Responder
AlbaFoto

ESTUPENDO ES UNA MARAVILLA ESTA UTILIDAD MUCHAS GRACIAS AMIGA

Responder
chinasky

gema me ha sido de gran ayuda en otras ocasiones pero en esta....no me funcionaa.E staria muy interesado en implantar esto, pero no me funciona sigo tus pasos y nada. es una plantilla minima

Responder
Gem@

Siento ver estos comentarios con tanto retraso por favor si alguien no ha solucionado su problema que me lo haga saber que estaré pendiente del comentario.


Gracias Ángel :)


chinasky uno de los problemas para que no funcione es que tengamos en nuestra plantilla mezcladas unidades relativas con pixeles la solución es muy compleja porque la plantilla debería tener definidas las mismas propiedades es decir que todo fueran píxeles o unidades relativas.

Responder
Homo Insanus

Hola, ¿qué tal? Me interesa una barbaridad lo de incluir ese código y esos botones para mi blog, en especial en el texto de las entradasHomo Insanus, pero no lo consigo. Tal vez sea por lo rara que es mi plantilla, no sé. La templates es ésta. ¿Puede usted decirme qué hago mal? Cuando dice en su post "El lugar indicado para añadirlo en nuestra plantilla es justo antes de (/head) (lo pongo con paréntesis en vez de corchetes para que no me de error el comment)" no me queda muy claro.

Muchas gracias de antemano. Y gran blog! Felicidades, es muy útil y ameno.

Responder
Gem@

Homo Insanus (</head>es una etiqueta que debes buscar en la plantilla) y justo antes debes añadir el script.

El script es el código que hay dentro de la caja.

Hay algo a tener en cuenta lo expliqué en comentarios anteriores y es que las fuentes deben estar definidas en pixeles (px) y no como unidades relativas (em)
Hay plantillas que el tamaño de fuentes incluso está mezclado porque a veces hacemos cambios y es algo muy común que ocurra.
Si esto es así resulta muy problemática la solución porque habría que cambiar todas las fuentes a píxeles.

Responder
Angel

Querida Gema:Hice lo recomendado pero tengo un problemita,aunque no es nada grave.No se porqué en el feedjit el tamaño de los países aumento de lo normal.

Tremendo blog el suyo y me ha sido de ayuda.Pronto voy a enlazar con usted cuando haga las categoraís para diferentes enlaces.

Estoy en :http://cristoestaalaspuertas.blogspot.com/

Dios le bendiga

Responder
Angel

También me gustaría si me recomienda algo para organizar mejor las categorías y quisiera saber el código para poner banners abajo del blog.

Saludos

Responder
Angel

El problema aparente fue temporero pero me gustaría que pasara por mi blog y me recomendara algo con el diseño.Se lo agradeceré mucho.

Responder
Gem@

Angel Luis González ha quedado perfecto el efecto de aumentar la fuente del blog y como bien dice se solucionaron los otros problemas.
Sobre alguna recomendación... no sabría que decir, veo todo muy bien organizado.
Si acaso.. añadiría un buscador interno, es muy útil y facilita cualquier búsqueda en el blog con palabras clave.
Algo sobre ese tema se puede ver aquí y algún enlace más aquí
Suerte :)

Responder
Angel

Ok, gracias Gema.Cuando pueda lo haré.Yo estoy loco por añadir uno.Y gracias por los comentarios sobre el blog.

Responder
Gem@

No debe dármelas es la verdad.
Saludos :)

Responder
Anónimo

"You don't have permission to access /dynamicindex9/textsizer.js on this server." :S

Responder
Gem@

yz No tienes acceso a ese servidor fede pero no entiendo lo que quieres decir con eso.

Responder
Unknown

Lo metí arriba justo del <head y me quedó bien. Gracias, gracias, gracias !

Responder
Gem@

:: alzheimeruniversal me alegra resultara bien, vi tu mail esta tarde lo responderé en cuento tenga un momento :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top